/* --------------------------------------------------------------------------*/
/*                                                                           */
/*                             t o p - n a v . c s s                         */
/*                                                                           */
/*    Layout with a fixed header on the top with navigation tabs             */
/*                                                                           */
/* --------------------------------------------------------------------------*/

/* Header */
header {
    height: 120px;
    max-height: 15%;
    float: left;
    width: 100%;
}
header figure {
    border-bottom: 1px blue solid;
}
header img {
    box-shadow: none;
}
header a {
    color: #000000;
    text-decoration: none;
}

/* -- Shift left-column, if any, under top-header -- */
.left-column {
    position: fixed;
    top: 20%;
    max-height: 80%;
}

/* -- Shift main, if any, under top-header -- */
.main {
    position: fixed;
    top: 15%;
    max-height: 85%;
    overflow: scroll;
}

/* Global navigation bar */
ul.tabs {
    position:relative; 
    text-align: center;
    top: 10px;
    height: 21px;
    width: 375px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}

.tabs li {
    display:inline;
}

.tabs a {
    padding-top: 5px;
    float: left; 
    width: 75px; 
    height: 21px; 
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    border-radius:3px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;

    -webkit-transition: background .5s ease;
    -moz-transition: background-color .5s ease;
    -ms-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background-color .5s ease;                
}

.tabs a:link,
.tabs a:visited {
    color: white;
    background-color: #7496b8;
}            
.tabs a:hover {
    background-color:#535898;
}

.tabs a:active {
    box-shadow:  0px 2px 2px 0px rgba(0,0,0,0.8) inset;
}

/* Color for current page */
.tabs a.current:link,
.tabs a.current:visited,
.tabs a.current:hover,
.tabs a.current:active {
    background-color:#030878;
}            

/* Download button */
#download-button {
    position: absolute;
    right: 15px;
    top: 12px;
}

/* Logo */
#logo {
    position:absolute;
    left: 5px;
    top: 0px;               
    height: 95px;
    width: 195px;
    text-decoration: none;
    background:  url('../images/logo-audiveris-195x80.png') no-repeat;
}

#logo-subtitle {
    position: absolute;
    right: 0px;
    bottom: 0px;
    text-align: right;
    color: black;
    font-size: 14px;
    text-shadow: 0px 2px 3px rgba(0,0,0,0.3);
}

/* z-index */
header,
#logo,
#logo-subtitle,
ul.tabs,
#download-button,
#download-version {    
    z-index: 10;
}
